<template>
  <div style="margin-top:20px">
    <!-- ----------------------------------opc------------------------------------------->
    <el-table ref="multipleTable" height="250" border :data="rule_map" size='mini'>
      <template slot="empty">
        <el-empty :description="$t('暂无数据')"></el-empty>
      </template>
      <el-table-column prop="rule_id" align='center' :label="$t('规则ID')" width="80" />
      <el-table-column prop="proto" align='center' :label="$t('协议名称')">
        <template slot-scope="scope">
          {{ rule[scope.row.proto] }}
        </template>
      </el-table-column>
      <el-table-column prop="action" align='center' :label="$t('动作')">
        <template slot-scope="scope">
          {{ $t(actionList[scope.row.action]) }}
        </template>
      </el-table-column>
      <el-table-column prop="type" align='center' :label="$t('功能码')">
        <template slot-scope="scope">
          {{ $t(tagTypeList[scope.row.tag_type]) || scope.row.tag_type }}
        </template>
      </el-table-column>
      <el-table-column prop="tag_name" align='center' :formatter="tagNameFormatter" :label="$t('点名')" />
      <el-table-column prop="accept_range" align='center' :label="$t('匹配范围')">
        <template slot-scope="scope">
          {{ $t(acceptRangeList[scope.row.accept_range]) }}
        </template>
      </el-table-column>
      <el-table-column prop="value_type" align='center' :formatter="valueTypeFormatter" :label="$t('数据类型')" />
      <el-table-column prop="value_range" align='center' :formatter="valueRangeFormatter" width="140" :label="$t('取值范围')" />
      <el-table-column align="center" :label="$t('操作')" width="160" fixed='right'>
        <template slot-scope="scope">
          <el-button type="success" plain @click="editRule(scope.row)" size='mini' :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
          <el-button type="danger" plain @click="deleteRule(scope.row)" size='mini' :class="'del' +(scope.$index+1)">{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- ----------------------------------opc_connect------------------------------------------->
    <el-table ref="multipleTable" height="250" border :data="rule_map_connect" size='mini' style="margin-top:20px;">
      <template slot="empty">
        <el-empty :description="$t('暂无数据')"></el-empty>
      </template>
      <el-table-column prop="rule_id" align='center' :label="$t('规则ID')" width="80" />
      <el-table-column prop="proto" align='center' :label="$t('协议名称')" min-width="130">
        <template slot-scope="scope">
          {{ rule[scope.row.proto] }}
        </template>
      </el-table-column>
      <el-table-column prop="action" align='center' :label="$t('动作')">
        <template slot-scope="scope">
          {{ $t(actionList[scope.row.action]) }}
        </template>
      </el-table-column>
      <el-table-column prop="operate_type" align='center' :label="$t('类型')">
        <template slot-scope="scope">
          {{ $t(operateTypeList[scope.row.operate_type]) }}
        </template>
      </el-table-column>
      <el-table-column prop="be_relate_tag_name" align='center' :label="$t('写操作点名')" min-width="100" />
      <el-table-column prop="relate_tag_name" align='center' :label="$t('关联写操作点名')" min-width="120" />
      <el-table-column prop="relate_value_type" align='center' :label="$t('数据类型')" />
      <el-table-column prop="relate_value_range" align='center' :formatter="relateRangeFormatter" min-width="145" :label="$t('关联写操作安全值范围')" />
      <el-table-column align="center" :label="$t('操作')" width="160" fixed='right'>
        <template slot-scope="scope">
          <el-button type="success" plain @click="editRule(scope.row)" size='mini'>{{$t('编辑')}}</el-button>
          <el-button type="danger" plain @click="deleteRule(scope.row)" size='mini'>{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import ruleArray from '../../ruleArray'
export default {
  name: 'OpcTable',
  props: {
    ruleMap: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    ruleMap: {
      handler (newValue, oldValue) {
        this.rule_map = []
        this.rule_map_connect = []
        newValue.forEach(val => {
          if (val.proto === 'OPCDA') {
            this.rule_map.push(val)
          } else if (val.proto === 'OPCDA_CONNECT') {
            this.rule_map_connect.push(val)
          }
        })
      },
      deep: true // 深度监听
    }
  },
  data () {
    return {
      dialogVisible: false,
      ruleDialogVisible: false,
      rule_map: [],
      rule_map_connect: [],
      registerValueRangeSelectList: {
        '0': '关',
        '1': '开',
        '2': '开关'
      },
      rule: ruleArray.ruleShow,
      actionList: { 'accept': '允许', 'alert': '告警' },
      acceptRangeList: ruleArray.acceptRangeList,
      tagTypeList: ruleArray.opcTypeList,
      operateTypeList: ruleArray.opcOperateTypeList
    }
  },
  mounted () {
    this.rule_map = []
    this.rule_map_connect = []
    this.ruleMap.forEach(val => {
      if (val.proto === 'OPCDA') {
        this.rule_map.push(val)
      } else if (val.proto === 'OPCDA_CONNECT') {
        this.rule_map_connect.push(val)
      }
    })
  },
  methods: {
    deleteRule (row) {
      this.$emit('delRuleMap', row)
    },
    editRule (row) {
      this.$emit('largeConfig', row)
    },
    tagNameFormatter (data) {
      if (data.accept_range === 'single') {
        return data.tag_name
      }
    },
    valueTypeFormatter (data) {
      if (data.tag_type === 'write' && data.accept_range === 'single') {
        return data.value_type
      }
    },
    valueRangeFormatter (data) {
      if (data.tag_type === 'write' && data.accept_range === 'single') {
        if (data.value_type === 'BOOL') {
          return this.$t(this.registerValueRangeSelectList[data.value_range.split('~')[0]])
        } else {
          return data.value_range
        }
      }
    },
    relateRangeFormatter (data) {
      if (data.relate_value_type === 'BOOL') {
        return this.$t(this.registerValueRangeSelectList[data.relate_value_range.split('~')[0]])
      } else {
        return data.relate_value_range
      }
    }
  }
}
</script>
